<!DOCTYPE html>
<html lang="zh">
<head>
  <title>ionic JS表单输入</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="../../lib/ionic/css/ionic.min.css">
</head>
<body ng-app="starter" ng-controller="myCtrl">
  <ion-content>
    <div class="list">
      <div class="item item-divider calm-bg">复选框</div>
      <ion-checkbox ng-repeat="item in checkList" ng-model="item.checked" ng-checked="item.checked">
        {{item.text}}
      </ion-checkbox>
      <div class="item">
        <pre>{{checkList | json}}</pre>
      </div>

      <div class="item item-divider calm-bg">
        单选按钮选中的值为：{{data.clientSide}}
      </div>
      <ion-radio ng-repeat="item in clientSideList" ng-value="item.value" ng-model="data.clientSide">
        {{item.text}}
      </ion-radio>

      <div class="item item-divider calm-bg">开关</div>
      <ion-toggle ng-repeat="item in settingsList" ng-model="item.checked" ng-checked="item.checked">
        {{item.text}}
      </ion-toggle>
      <div class="item">
        <pre>{{settingsList | json}}</pre>
      </div>
    </div>
  </ion-content>

  <script src="../../lib/ionic/js/ionic.bundle.js"></script>
  <script src="../../js/app.js"></script>
  <script>
    angular.module("starter", ["ionic"]).controller("myCtrl", function ($scope) {
      //复选框数据
      $scope.checkList = [
        {text: "Angular", checked: true},
        {text: "Backbone", checked: false}
      ];
      //单选框数据
      $scope.clientSideList = [
        {text: "Angular", value: "Angular"},
        {text: "Backbone", value: "Backbone"}
      ];
      $scope.data = {
        clientSide: "Backbone"
      };
      //开关数据
      $scope.settingsList = [
        {text: "Angular", checked: true},
        {text: "Backbone", checked: false}
      ];
    });
  </script>
</body>
</html>
